<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any>([
  {
    orderSn: "20250603000135589",
    merchantName: "小蓝卡",
    amount: "50",
    status: "待支付",
    productName: "50元入场券抢占价值1980元八重豪礼+4节课（限新生体验）",
    createdAt: "2025-06-03 09:05:05",
    paymentTime: "-",
  },
  {
    orderSn: "20250603000135589",
    merchantName: "小蓝卡",
    amount: "50",
    status: "待使用",
    productName: "50元入场券抢占价值1980元八重豪礼+4节课（限新生体验）",
    createdAt: "2025-06-03 09:05:05",
    paymentTime: "2025-06-03 09:05:05",
  },
  {
    orderSn: "20250603000133389",
    merchantName: "小蓝卡",
    amount: "50",
    status: "已使用",
    productName: "50元入场券抢占价值1980元八重豪礼+4节课（限新生体验）",
    createdAt: "2025-06-03 09:05:05",
    paymentTime: "2025-06-03 09:05:05",
  },
]);

const modalVisible = ref(false);
</script>

<template>
  <umi-container bg-color="#f2f2f2" height="100%" padding="16px" :gap="16">
    <umi-breadcrumb :items="['订单管理', '订单列表']"></umi-breadcrumb>
    <umi-search-card>
      <umi-row :gutter="16">
        <umi-col :span="8">
          <umi-form-item label="订单编码">
            <umi-input placeholder="请输入订单编码"></umi-input>
          </umi-form-item>
        </umi-col>
        <umi-col :span="8">
          <umi-form-item label="下单时间">
            <umi-datepicker-range></umi-datepicker-range>
          </umi-form-item>
        </umi-col>
        <umi-col :span="8">
          <umi-form-item label="支付时间">
            <umi-datepicker-range></umi-datepicker-range>
          </umi-form-item>
        </umi-col>
        <umi-col :span="8">
          <umi-form-item label="订单状态">
            <umi-select>
              <umi-option value="1">全部</umi-option>
              <umi-option value="2">待支付</umi-option>
              <umi-option value="2">待使用</umi-option>
              <umi-option value="3">已使用</umi-option>
            </umi-select>
          </umi-form-item>
        </umi-col>
        <umi-col :span="8">
          <umi-form-item label="用户编号">
            <umi-input placeholder="请输入用户编号"></umi-input>
          </umi-form-item>
        </umi-col>
      </umi-row>
    </umi-search-card>
    <umi-card :border="false">
      <umi-table :data="dataList" :toolbar="true">
        <template #columns>
          <umi-table-column title="序号" data-index="id" :width="60"></umi-table-column>
          <umi-table-column title="微信资料" slot-name="wxinfo"></umi-table-column>
          <umi-table-column title="商家名称" data-index="merchantName"></umi-table-column>
          <umi-table-column title="订单编号" data-index="orderSn" :width="170"></umi-table-column>
          <umi-table-column title="订单金额" slot-name="amount" :width="90"></umi-table-column>
          <umi-table-column title="支付金额" slot-name="amount" :width="90"></umi-table-column>
          <umi-table-column title="订单状态" data-index="status" :width="90"></umi-table-column>
          <umi-table-column title="下单时间" data-index="createdAt" :width="160"></umi-table-column>
          <umi-table-column title="支付时间" data-index="paymentTime" :width="160" :hidden="true"></umi-table-column>
          <umi-table-column title="操作" slot-name="action" :width="140"></umi-table-column>
        </template>
        <template #amount="{ record }">
          <umi-text-price>{{ record.amount }}</umi-text-price>
        </template>
        <template #action>
          <umi-space :size="10">
            <router-link to="/order/detail">
              <umi-button type="primary">详情</umi-button>
            </router-link>
            <umi-button type="primary" @click="modalVisible = true">核销</umi-button>
          </umi-space>
        </template>
        <template #wxinfo>
          <umi-user-info :phone="false"></umi-user-info>
        </template>
      </umi-table>
    </umi-card>
    <umi-modal v-model:visible="modalVisible">
      <umi-form>
        <umi-form-item label="核销码">
          <umi-input placeholder="请输入核销码"></umi-input>
        </umi-form-item>
      </umi-form>
    </umi-modal>
  </umi-container>
</template>
